<template>
	<div class="details">
		<ul v-for="(v,i) in this.$store.state.note.details" :key="i" @click="look(i)">
			<li>
				<div class="top">
					<div class="left">
						<img :src="v.img" />
					</div>
					<div class="center">
						<p>{{v.name}}</p>
						<span>{{v.data}}</span>
						<span>阅读：{{v.num}}</span>
					</div>
					<div class="right">
						<span>{{v.xingzhi}}</span>
						<span>{{v.con}}</span>
						<span class="iconfont icon-jiantou1"></span>
					</div>
				</div>
				<div class="middle">
					<p>{{v.content}}</p>
				</div>
				<div class="bottom">
					<span class="iconfont icon-pinglun"> 评论</span>
					<span class="iconfont icon-zan">  赞</span>
					<span class="iconfont icon-zhuanfa">  转发</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		methods:{
			look(i){
				this.$store.state.note.notede=this.$store.state.note.details[i]
				this.$router.push("/notecon")
			}
		}
	}
</script>

<style lang="scss">
	.details{
		width: 100%;
		padding-bottom: 0.6rem;
		ul{
			background-color: white;
		}
		li{
			width: 94%;
			margin: auto;
			margin-top: 0.08rem;
			
			.top{
				display: flex;
				padding-top: 0.13rem;
				justify-content: space-between;
				img{
					width:0.41rem;
				}
				.center{
					margin-left: -0.6rem;
					p{
						font-size: 0.16rem;
						color: #007af8;
					}
					span:nth-of-type(1){
						color: #bcbcbc;
						font-size: 0.09rem;
					}
					span:nth-of-type(2){
						color: #007af8;
						margin-left: 0.24rem;
						font-size: 0.11rem;
					}
				}
				.right{
					padding-right: 0rem;
					span:nth-of-type(1){
						background-color: #bcbcbc;
						width: 0.29rem;
						height: 0.16rem;
						display: inline-block;
						font-size: 0.09rem;
						text-align: center;
						color: #d4d4d4;
					}
					span:nth-of-type(2){
						font-size: 0.13rem;
						margin-left: 0.04rem;
						color: #b6b6b6;
					}
				}
			}
			.middle{
				padding: 0.1rem 0;
				font-size: 0.15rem;
			}
			.bottom{
				display: flex;
				justify-content: space-around;
				padding-bottom: 0.12rem;
				.iconfont{
					font-size: 0.16rem !important;
				}
			}
		}
		
	}
</style>
